<!-- 对 button 组件的编辑 -->
<template>
  <div class="button-edit" v-if="dialogShow">
    <SetDesignDialog :title="name" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose" ref="settingComponentDialog">
      <div class="edit-container-u">
        <el-tabs v-model="activeName">
          <el-tab-pane label="设置" name="1">
             <el-row>
              <el-col :span="12">
                <TextAlign :defValue="data.config.textAlign" :chgValue="(d)=>{data.config.textAlign = d}" />
              </el-col>
              <el-col :span="12">
                <FontFamily :defValue="data.config.fontFamily" :chgValue="(d)=>{data.config.fontFamily = d}" />
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <FontWeight :defValue="data.config.fontWeight" :chgValue="(d)=>{data.config.fontWeight = d}" />
              </el-col>
              <el-col :span="12">
                <FontSize :defValue="data.config.fontSize" :chgValue="(d)=>{data.config.fontSize = d}" />
              </el-col>
            </el-row>
            <el-row v-if="data.theme !== 1">
              <el-col :span="12">
                 <el-form :label-width="formLabelWidth">
                  <el-form-item label="按钮大小" style="margin-bottom:0px;">
                    <el-select style="width: 100px;" size="mini" v-model="data.config.notTheme1.buttonSize" placeholder="请选择">
                      <el-option label="默认" :value="''"></el-option>
                      <el-option label="小" :value="'btn-pd1'"></el-option>
                      <el-option label="中" :value="'btn-pd2'"></el-option>
                      <el-option label="大" :value="'btn-pd3'"></el-option>
                      <el-option label="超大" :value="'btn-pd4'"></el-option>
                      <el-option label="巨大" :value="'btn-pd5'"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="12">
                <el-form :label-width="formLabelWidth">
                  <el-form-item label="圆角" style="margin-bottom:0px;">
                    <el-select style="width: 100px;" size="mini" v-model="data.config.notTheme1.buttonBorderRadius" placeholder="请选择">
                      <el-option label="默认" :value="''"></el-option>
                      <el-option label="直角" :value="'btn-border-radius0'"></el-option>
                      <el-option label="小圆角" :value="'btn-border-radius1'"></el-option>
                      <el-option label="大圆角" :value="'btn-border-radius2'"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <LinkSimple :defValue="data.config.link" :chgValue="(d)=>{data.config.link = d}" />
              </el-col>
            </el-row>
            <el-row style="width:840px;">
              <el-col :span="12">
                <el-form :label-width="formLabelWidth" @submit.native.prevent>
                  <el-form-item label="按钮名称" style="margin-bottom:0px;">
                    <el-input size="mini" v-model="data.text" maxlength="64"></el-input>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="12">

              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="样式选择" name="2">
            <div class="iframe" v-loading="iframeLoading">
              <iframe :src="iframeSrc" frameborder="0" style="width:100%;height:400px; height:calc(100vh - 300px);" ref="iframeRender"></iframe>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </SetDesignDialog>
  </div>
</template>

<script>
import FontFamily from '@/components/common/design/dialog/component/formitem/FontFamily.vue'
import LinkSimple from '@/components/common/design/dialog/component/formitem/LinkSimple.vue'
import TextAlign from '@/components/common/design/dialog/component/formitem/TextAlign.vue'
import FontWeight from '@/components/common/design/dialog/component/formitem/FontWeight.vue'
import FontSize from '@/components/common/design/dialog/component/formitem/FontSize.vue'
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import * as WindowType from '@/config/windowtype.js'
// import * as PubsubType from '@/config/pubsubtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { mapState } from 'vuex'
// import PubSub from 'pubsub-js'
import qs from 'qs'
import _ from 'lodash'

export default {
  computed: {
    ...mapState([
      'design'
    ])
  },
  created () {
    VueFunctions.method(WindowType.EDIT_COMPONENT_WITH_COMPONENTBUTTON, (bjComponent) => {
      this.close()
      this.dialogShow = true
      this.bjComponent = bjComponent
      this.data = bjComponent.render.data

      // coding ...
      if (this.data && this.data.config && this.data.config.textAlign === '') {
        this.data.config.textAlign = 'left'
      }

      this.iframeLoading = true

      this.iframeStyle = {
        w: 825, // 宽度，如果参数不存在则后面的参数无效;
        row: 7, // 行数
        col: 4, // 列数
        compname: 'component_button', // 组件名称 如果参数不存在则后面的参数无效
        theme: this.$store.state.site.config.theme, // 主题号 默认 1
        color: this.$store.state.site.config.color, // 主题颜色 默认 0
        ttextalign: 'center', // 编号显示位置，默认 left
        tcolor: '#888', // 编号字体颜色，默认 #67C23A
        now: new Date().getTime() // 可有可无，目的去除缓存
      }

      let query = qs.stringify(this.iframeStyle)
      this.iframeSrc = '/api/udin/component?' + query

      this.$nextTick(() => {
        this.$refs['settingComponentDialog'].open()
      })

      // iframe 加载完成后回调的方法，
      let funcname = WindowType.API_UDIN_COMPONENT_ONLOAD_.replace('[ComponentName]', this.iframeStyle.compname).toUpperCase()
      window[funcname] = () => {
        this.iframeLoading = false
        let componentName = this.getComponentName()
        let defaultData = BackendjsFunctions.componentDefaultData(componentName)
        let objArray = []
        for (let i = 1; i <= 27; i++) {
          defaultData.ele = '#render-' + i
          defaultData.data.theme = i
          defaultData.data.config.textAlign = 'center'
          objArray.push({
            renderData: _.cloneDeep(defaultData),
            title: '编号：' + i,
            theme: i
          })
        }
        // 调用 iframe 中的 render 方法进行渲染
        this.$refs['iframeRender'].contentWindow.render(objArray, this.data.theme)
      }

      // 选择theme后回调的方法，并且传入选择的数据
      let funcallbackname = WindowType.API_UDIN_COMPONENT_ONLOAD_CALLBACK_.replace('[ComponentName]', this.iframeStyle.compname).toUpperCase()
      window[funcallbackname] = (renderData) => {
        this.data.theme = renderData.data.theme
        // 校验现在的theme是否与iframe显示的选择的theme一致
        this.$refs['iframeRender'].contentWindow.checkTheme(this.data.theme)
      }
    })
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_CLOSE, (event, data) => {
    //   this.close()
    // })
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  data () {
    return {
      dialogShow: false,
      activeName: '1',
      iframeLoading: true,
      iframeStyle: {},
      formLabelWidth: '120px',
      name: '按钮',
      bjComponent: null,
      data: null,
      iframeSrc: null
    }
  },
  methods: {
    getComponentName () {
      var compname = this.iframeStyle.compname
      var temp = this.titleCase(compname.replace('_', ' ')).replace(' ', '')
      return temp.replace(temp[0], temp[0].toLowerCase())
    },
    titleCase (str) {
      return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase())
    },
    close () {
      this.dialogShow = false
      this.activeName = '1'
      this.iframeLoading = true
      this.iframeStyle = {}
      this.name = '按钮'
      this.bjComponent = null
      this.data = null
      this.iframeSrc = ''
    },
    saveclose () {
      this.bjComponent.render.data = _.cloneDeep(this.data)
      BackendjsFunctions.saveComponent(this.bjComponent)
      this.close()
    }
  },
  components: {
    SetDesignDialog,
    LinkSimple,
    FontFamily,
    TextAlign,
    FontWeight,
    FontSize
  }
}

</script>

<style scoped>
.edit-container-u {
  width: 840px;
  min-height: 410px;
  min-height:calc(100vh - 300px);
}
</style>
